<div class="page-wrapper d-flex flex-column pt-4">
    <div class="container-xl">
        <div class="page-header d-print-none">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Listing
                    </div>
                    <h3 class="page-title">
                        All Local Settings
                    </h3>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body d-flex flex-row-reverse">
        <aside class="bd-sidebar sub-sidebar">
            <nav class="bd-links p-3" aria-label="Sub-section navigation">
                <div class="card card-body">
                    <filter-list request="request" callback="getList(pageIndex)"
                        create-url="'/portal/configuration/create'" create-text="'Create'"></filter-list>
                </div>
            </nav>
        </aside>

        <!-- ----------------------------------------------------------- -->

        <div class="content-body py-3 pe-3">
            <div class="card mb-5">
                <div class="card-body">
                    <section class="mb-3 manual">
                        <div class="row">
                            <div class="col">
                                <table class="table table-sm table-hover mb-0" cellspacing="0">
                                    <thead class="thead-light">
                                        <tr>
                                            <th scope="col" class="col">Setting Key</th>
                                            <th scope="col" class="col">Description</th>
                                            <th scope="col" class="col">Value</th>
                                            <th scope="col" class="col">Category</th>
                                            <th scope="col" class="col"></th>
                                        </tr>
                                    </thead>

                                    <tbody class="sortable" ng-init="init()">
                                        <tr ng-repeat="item in data.items track by $index" class="sortable-item"
                                            sort-model="configuration" sort-model-id="{{item.id}}">
                                            <td>
                                                <a href="/portal/configuration/details/{{item.id}}"><span
                                                        ng-bind="item.keyword"></span></a>
                                            </td>
                                            <td>
                                                <small class="text-black-50"><span
                                                        ng-bind="item.description"></span></small>
                                            </td>
                                            <td>
                                                <small>
                                                    <module-data-preview data="item.property" width="50">
                                                    </module-data-preview>
                                                </small>
                                            </td>
                                            <td>
                                                <small class="text-black-50"><span
                                                        ng-bind="item.category"></span></small>
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm btn-group-sm float-end" role="group"
                                                    aria-label="Actions">
                                                    <a href="/portal/configuration/details/{{item.id}}"
                                                        class="btn btn-link text-primary">
                                                        <span class="fa fa-pen"></span>
                                                    </a>
                                                    <a href="#" ng-click="remove(item.id);"
                                                        class="btn btn-link text-danger">
                                                        <span class="fas fa-trash-alt"></span>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </section>
                </div>
            </div>

            <div class="">
                <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
                    ul-class="pagination justify-content-end m-0" a-class="page-link" paging-action="getList(page-1)"
                    scroll-top="true"></paging>
            </div>
        </div>

    </div>
</div>